// 饼图基础父类组件 - 其他所有饼图组件的父类
class BasePieChartComponent extends HTMLElement {
    constructor() {
        super();
        
        this.chart = null;
        this.timerId = null;
        this.observer = null;
        
        // 创建Shadow DOM
        const shadow = this.attachShadow({ mode: 'closed' });

        // 创建模板
        const template = document.createElement("template");
        template.innerHTML = `
            <style>
               :host {
                    display: block;
                     width: 800px;
                     height: 600px;
                }
                .chart-container {
                    width: 100%;
                    height: 100%;
                    min-width: 600px; /* 最小宽度（拖拽缩小的下限） */
                    min-height: 300px; /* 最小高度（拖拽缩小的下限） */
                }
            </style>
            <div class="chart-container"></div>
        `;
        
        // 克隆模板内容
        shadow.appendChild(template.content.cloneNode(true));
        
        // 获取图表容器
        const chartDiv = shadow.querySelector('.chart-container');
        
        // 初始化图表实例
        this.chart = echarts.init(chartDiv);
    }
    
    // 监听的属性列表 - 子类可以重写
    static get observedAttributes() {
        return window.getAttributesByType('pie');
    }
    
    // 默认配置 - 饼图特有配置
    getDefaultConfig() {
        return {
            titleAttrs: [
                ['title-text_text', '数据统计'],
                ['title-show_radio', true],
                ['title-left_slider', 'center'],
                ['title-top_slider', ''],
                ['title-right_slider', ''],
                ['title-bottom_slider', ''],
                ['title-textalign_select', 'center'],
                ['title-textstyle-color_colorpicker', '#333'],
                ['title-textstyle-fontsize_number', 18],
                ['title-textstyle-fontweight_select', 'bold'],
                ['title-subtext_text', ''],
                ['title-subtextstyle-color_colorpicker', '#666'],
                ['title-subtextstyle-fontsize_number', 14],
                ['title-subtextstyle-fontweight_select', 'normal'],
            ],
            legendAttrs: [
                ['legend-show_radio', true],
                ['legend-textstyle-color_colorpicker', '#666'],
                ['legend-itemstyle-color_colorpicker', 'auto'],
                ['legend-itemheight_number', 14],
                ['legend-itemwidth_number', 25],
                ['legend-bottom_number', "auto"],
                ['legend-top_number', "center"],
                ['legend-left_number', "right"],
                ['legend-orient_select', "vertical"],
                ['legend-itemgap_number', 20],
                ['legend-textstyle-fontsize_number', 12]
            ],
            pieAttrs: [
                ['pie-radius_slider', '40%'],
                ['pie-center_array', '50%,50%'],
                ['pie-label-show_radio', true],
                ['pie-label-position_select', 'outside'],
                ['pie-label-formatter_text', '{b}: {c} ({d}%)'],
                ['pie-labelline-show_radio', true],
                ['pie-labelline-length_number', 10],
                ['pie-labelline-length2_number', 5],
                ['pie-padangle_number', 5], // 默认值5，可根据需求调整
            ],
            seriesAttrs: [
                ['base-data-url_text', ''],
                ['series-name_text', '数据'],
                ['series-type_select', 'pie'],
                ['series-itemstyle-color_array', "#C1232B,#B5C41F,#FCCE10,#E87C25,#27727B,#FE8463"],
                ['series-emphasis-itemstyle-shadowblur_number', 10],
                ['series-emphasis-itemstyle-shadowcolor_colorpicker', 'rgba(0, 0, 0, 0.5)'],
                ['base-echart-init-script_text', ''],
            ]
        };
    }
    
    // 默认颜色方案
    getDefaultColors() {
        return [
            "#C1232B", "#B5C41F", "#FCCE10", "#E87C25", 
            "#27727B", "#FE8463", "#9BCA63", "#FAD860",
            "#64B5F6", "#80CBC4", "#CE93D8", "#FF8A65"
        ];
    }
    
    connectedCallback() {
        // 导入工具函数
        const { buildConfig } = window.attributeUtils;
        const config = this.getDefaultConfig();
        
        // 生成配置
        const titleConfig = buildConfig(this, config.titleAttrs);
        const legendConfig = buildConfig(this, config.legendAttrs);
        const pieConfig = buildConfig(this, config.pieAttrs);
        const seriesConfig = buildConfig(this, config.seriesAttrs);
        
        // 调整初始大小
        this.resizeChart();
        // 监听resize事件
        window.addEventListener('resize', this.resizeChart.bind(this));
        // 观察父容器的大小变化
        if (ResizeObserver) {
            this.observer = new ResizeObserver(() => this.resizeChart());
            this.observer.observe(this.parentElement);
        }
        
        // 处理颜色配置
        if (seriesConfig.itemstyleColor && seriesConfig.itemstyleColor.length <= 1) {
            seriesConfig.itemstyleColor = this.getDefaultColors();
        }
        
        // 加载数据并渲染图表
        if (seriesConfig.dataUrl) {
            this.loadDataAndRender(seriesConfig, titleConfig, legendConfig, pieConfig);
        } else {
            // 使用默认数据渲染
            this.renderChart(seriesConfig, titleConfig, legendConfig, pieConfig);
        }
        
        // 执行外部初始化脚本
        if (seriesConfig.echartInitScript) {
            try {
                eval(seriesConfig.echartInitScript);
            } catch (e) {
                console.error('执行初始化脚本错误:', e);
            }
        }
    }
    
    // 加载数据并渲染图表
    loadDataAndRender(seriesConfig, titleConfig, legendConfig, pieConfig) {
        fetch(seriesConfig.dataUrl)
            .then(res => {
                if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
                return res.json();
            })
            .then(data => {
                this.renderChart(seriesConfig, titleConfig, legendConfig, pieConfig, data);
            })
            .catch(err => {
                console.error('数据获取失败:', err);
                // 使用默认数据
                this.renderChart(seriesConfig, titleConfig, legendConfig, pieConfig);
            });
    }
    
    // 渲染图表 - 子类可以重写以实现特定逻辑
    renderChart(seriesConfig, titleConfig, legendConfig, pieConfig, data = null) {
        // 处理数据
        let pieData = data || this.getDefaultData();
        
        // 生成series数组
        const series = this.generateSeries(pieData, seriesConfig, pieConfig);
        
        const option = {
            title: {
                show: titleConfig.show,
                text: titleConfig.text,
                left: titleConfig.left,
                right: titleConfig.right,
                top: titleConfig.top,
                bottom: titleConfig.bottom,
                textAlign: titleConfig.textalign,
                textStyle: {
                    color: titleConfig.textstyleColor,
                    fontSize: titleConfig.textstyleFontsize,
                    fontWeight: titleConfig.textstyleFontweight,
                },
                subtext: titleConfig.subtext,
                subtextStyle: {
                    color: titleConfig.subtextstyleColor,
                    fontSize: titleConfig.subtextstyleFontsize,
                    fontWeight: titleConfig.subtextstyleFontweight,
                },
            },
            legend: {
                show: legendConfig.show,
                bottom: legendConfig.bottom,
                left: legendConfig.left,
                top: legendConfig.top,
                orient: legendConfig.orient,
                itemWidth: legendConfig.itemwidth,
                itemHeight: legendConfig.itemheight,
                textStyle: {
                    color: legendConfig.textstyleColor,
                    fontSize: legendConfig.textstyleFontsize
                },
                itemStyle: {
                    color: legendConfig.itemstyleColor
                },
                itemGap: legendConfig.itemgap,
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            series: series
        };
        console.log("饼图配置："+ JSON.stringify(option))
        this.chart.setOption(option);
    }
    
    // 生成系列配置 - 子类可以重写
    generateSeries(pieData, seriesConfig, pieConfig) {
        // 处理饼图数据格式
        let processedData = [];
        if (Array.isArray(pieData) && pieData.length > 0) {
            const firstItem = pieData[0];
            const key = Object.keys(firstItem)[0];
            processedData = firstItem[key].map(item => ({
                name: item.name,
                value: item.value
            }));
        }
        
        return [{
            name: seriesConfig.name,
            type: 'pie',
            colorBy: "data",
            radius: pieConfig.radius,
            center: pieConfig.center,
            data: processedData,
            label: {
                show: pieConfig.labelShow,
                position: pieConfig.labelPosition,
                formatter: pieConfig.labelFormatter
            },
            labelLine: {
                show: pieConfig.labellineShow,
                length: pieConfig.labellineLength,
                length2: pieConfig.labellineLength2
            },
            itemStyle: {
                color: params => {
                    const colors = seriesConfig.itemstyleColor || this.getDefaultColors();
                    return colors[params.dataIndex % colors.length];
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: seriesConfig.emphasisItemstyleShadowblur,
                    shadowColor: seriesConfig.emphasisItemstyleShadowcolor
                }
            }
        }];
    }
    
    // 获取默认数据 - 子类可以重写
    getDefaultData() {
        return [
            {
                "数据分布": [
                    { "name": "类别A", "value": 35 },
                    { "name": "类别B", "value": 25 },
                    { "name": "类别C", "value": 20 },
                    { "name": "类别D", "value": 15 },
                    { "name": "类别E", "value": 5 }
                ]
            }
        ];
    }
    
    // 属性变化时更新图表
    attributeChangedCallback(name, oldValue, newValue) {
        if (name && oldValue !== newValue) {
            const currentOptions = this.chart.getOption();
            if (!currentOptions) return;
            
            this.handleAttributeChange(name, newValue, currentOptions);
        }
    }
    
    // 处理属性变化 - 子类可以扩展
    handleAttributeChange(name, value, currentOptions) {
        // 存储更新后的配置（外部函数返回新配置）
        let updatedOptions;

        switch (name) {
            // 饼图特有属性
            case 'pie-radius_slider':
                updatedOptions = updatePieRadius(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-center_array':
                updatedOptions = updatePieCenter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-label-show_radio':
                updatedOptions = updatePieLabelShow(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-label-position_select':
                updatedOptions = updatePieLabelPosition(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-label-formatter_text':
                updatedOptions = updatePieLabelFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-labelline-show_radio':
                updatedOptions = updatePieLabelLineShow(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-labelline-length_number':
                updatedOptions = updatePieLabelLineLength(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-labelline-length2_number':
                updatedOptions = updatePieLabelLineLength2(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-padangle_number':
                updatedOptions = updateSeriesPadAngle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 系列相关属性
            case 'series-name_text':
                updatedOptions = updateSeriesName(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowblur_number':
                updatedOptions = updateEmphasisShadowBlur(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowcolor_colorpicker':
                updatedOptions = updateEmphasisShadowColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 标题相关属性
            case 'title-show_radio':
                updatedOptions = updateTitleVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-text_text':
                updatedOptions = updateTitleText(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-color_colorpicker':
                updatedOptions = updateTitleStyle('color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontsize_number':
                updatedOptions = updateTitleStyle('fontSize', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontweight_select':
                updatedOptions = updateTitleFontWeight('title', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontstyle_select':
                updatedOptions = updateTitleStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtext_text':
                updatedOptions = updateSubtitleText(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // 副标题文本颜色
            case 'title-subtextstyle-color_colorpicker':
                updatedOptions = updateSubtitleTextColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtextstyle-fontsize_number':
                updatedOptions = updateSubtitleFontSize(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // 副标题字体粗细
            case 'title-subtextstyle-fontweight_select':
                updatedOptions = updateTitleFontWeight('subtitle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtextstyle-fontstyle_select':
                updatedOptions = updateSubtitleStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-left_slider':
                updatedOptions = updateTitlePosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-top_slider':
                updatedOptions = updateTitlePosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-right_slider':
                updatedOptions = updateTitlePosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-bottom_slider':
                updatedOptions = updateTitlePosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-itemgap_number':
                updatedOptions = updateTitleItemGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textalign_select':
                updatedOptions = updateTitleTextAlign(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 网格相关属性
            case 'grid-left_slider':
                updatedOptions = updateGridPosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-right_slider':
                updatedOptions = updateGridPosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-top_slider':
                updatedOptions = updateGridPosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-bottom_slider':
                updatedOptions = updateGridPosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-containlabel_radio':
                updatedOptions = updateGridContainLabel(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 图例相关属性
            // ======================
            case 'legend-show_radio':
                updatedOptions = updateLegendVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-left_number':
                updatedOptions = updateLegendPosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-top_number':
                updatedOptions = updateLegendPosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-right_number':
                updatedOptions = updateLegendPosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-bottom_number':
                updatedOptions = updateLegendPosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-color_colorpicker':
                updatedOptions = updateLegendTextStyle('color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontsize_number':
                updatedOptions = updateLegendTextStyle('fontSize', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemwidth_number':
                updatedOptions = updateLegendItemStyle('itemWidth', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemheight_number':
                updatedOptions = updateLegendItemStyle('itemHeight', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemgap_number':
                updatedOptions = updateLegendItemGap(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontweight_select':
                updatedOptions = updateLegendFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontstyle_select':
                updatedOptions = updateLegendTextStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-orient_select':
                updatedOptions = updateLegendOrientation(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-selectmode_select':
                updatedOptions = updateLegendSelectMode(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 提示框相关
            // ======================
            case 'tooltip-show_radio':
                updatedOptions = updateTooltipVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions, true);
                break;
            case 'tooltip-trigger_select':
                updatedOptions = updateTooltipTrigger(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-type_select':
                updatedOptions = updateTooltipAxisPointerType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-snap_radio':
                updatedOptions = updateTooltipAxisPointerSnap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-show_radio':
                updatedOptions = updateTooltipAxisPointerLabelVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-color_colorpicker':
                updatedOptions = updateTooltipAxisPointerLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontsize_number':
                updatedOptions = updateTooltipAxisPointerLabelFontSize(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontweight_select':
                updatedOptions = updateTooltipAxisPointerLabelFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontstyle_select':
                updatedOptions = updateTooltipAxisPointerLabelFontStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-linestyle-color_colorpicker':
                updatedOptions = updateTooltipAxisPointerLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-linestyle-width_number':
                updatedOptions = updateTooltipAxisPointerLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-formatter_text':
                updatedOptions = updateTooltipFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-backgroundcolor_colorpicker':
                updatedOptions = updateTooltipBackgroundColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-bordercolor_colorpicker':
                updatedOptions = updateTooltipBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-borderwidth_number':
                updatedOptions = updateTooltipBorderWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-padding_number':
                updatedOptions = updateTooltipPadding(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 系列属性
            // ======================
            case 'series-label-show_radio':
                updatedOptions = updateSeriesLabelVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-position_select':
                updatedOptions = updateSeriesLabelPosition(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-distance_number':
                updatedOptions = updateSeriesLabelDistance(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-color_colorpicker':
                updatedOptions = updateSeriesLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontsize_number':
                updatedOptions = updateSeriesLabelFontSize(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontweight_select':
                updatedOptions = updateSeriesLabelFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontstyle_select':
                updatedOptions = updateSeriesLabelFontStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-formatter_text':
                updatedOptions = updateSeriesLabelFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-show_radio':
                updatedOptions = updateSeriesLabelLineVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barmaxwidth_slider':
                updatedOptions = updateSeriesBarMaxWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-borderradius_number':
                updatedOptions = updateSeriesItemStyleBorderRadius(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-bargap_text':
                updatedOptions = updateSeriesBarGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barminheight_slider':
                updatedOptions = updateSeriesBarMinHeight(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-showbackground_radio':
                updatedOptions = updateSeriesShowBackground(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-color_colorpicker':
                updatedOptions = updateSeriesBackgroundStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-bordercolor_colorpicker':
                updatedOptions = updateSeriesBackgroundStyleBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-borderwidth_number':
                updatedOptions = updateSeriesBackgroundStyleBorderWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-bordertype_select':
                updatedOptions = updateSeriesBackgroundStyleBorderType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-opacity_slider':
                updatedOptions = updateSeriesBackgroundStyleOpacity(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-linestyle-color_colorpicker':
                updatedOptions = updateSeriesLabelLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-linestyle-width_number':
                updatedOptions = updateSeriesLabelLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-color_array':
                updatedOptions = updateSeriesItemStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-bordercolor_colorpicker':
                updatedOptions = updateSeriesItemStyleBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-borderradius_slider':
                updatedOptions = updateSeriesItemStyleBorderRadius(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barminwidth_slider':
                updatedOptions = updateSeriesBarMinWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowblur_number':
                updatedOptions = updateSeriesEmphasisItemStyleShadowBlur(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowcolor_colorpicker':
                updatedOptions = updateSeriesEmphasisItemStyleShadowColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-stack_text':
                updatedOptions = updateSeriesStack(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barcategorygap_text':
                updatedOptions = updateSeriesBarCategoryGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 饼图专属
            // ======================
            case 'pie-inner_number':
                updatedOptions = updatePieInner(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-outer_number':
                updatedOptions = updatePieOuter(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-clockwise_radio':
                updatedOptions = updatePieClockwise(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-startangle_number':
                updatedOptions = updatePieStartAngle(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-minangle_number':
                updatedOptions = updatePieMinAngle(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-minshowlabelangle_number':
                updatedOptions = updatePieMinShowLabelAngle(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-itemstyle-borderradius_text':
                updatedOptions = updatePieItemStyleBorderRadius(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-roseType_select':
                updatedOptions = updatePieRoseType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-selectedmode_select':
                updatedOptions = updatePieSelectedMode(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'pie-selectedoffset_number':
                updatedOptions = updatePieSelectedOffset(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            case 'legend-itemstyle-color_colorpicker':
                updatedOptions = updateLegendItemStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 数据相关属性
            case 'base-data-url_text':
                this.updateData(value);  // 保留数据更新逻辑
                break;

            // 定时器相关属性
            case 'echart-timer':
                this.setTimer(parseInt(value) * 1000);  // 保留定时器逻辑
                break;
            // 默认情况：未处理的属性
            default:
                console.log(`未处理的属性: ${name}`);
        }
    }

    // 组件断开连接时清理资源
    disconnectedCallback() {
        window.removeEventListener('resize', this.resizeChart.bind(this));
        
        if (this.observer) {
            this.observer.disconnect();
        }
        
        clearInterval(this.timerId);
    }
    
    // 调整图表大小
    resizeChart() {
        if (this.chart) {
            this.chart.resize();
        }
    }
    
    // 设置定时器
    setTimer(interval) {
        clearInterval(this.timerId);
        if (interval > 0) {
            this.timerId = setInterval(() => {
                this.executeScript();
            }, interval);
        }
    }
    
    // 执行脚本
    executeScript() {
        const { buildConfig } = window.attributeUtils;
        const seriesConfig = buildConfig(this, this.getDefaultConfig().seriesAttrs);
        
        if (seriesConfig.echartTimerScript) {
            try {
                eval(seriesConfig.echartTimerScript);
            } catch (error) {
                console.log(error.message);
            }
        }
    }
    
    // 获取图表实例
    getChartInstance() {
        return this.chart;
    }
    
    // 更新数据
    async updateData(dataurl) {
        try {
            if (!dataurl) {
                throw new Error("数据请求URL不能为空");
            }
            if (!this.chart) {
                throw new Error("图表实例未初始化");
            }
            
            const response = await fetch(dataurl);
            if (!response.ok) {
                throw new Error(`HTTP请求失败: ${response.status}`);
            }
            
            const data = await response.json();
            const { buildConfig } = window.attributeUtils;
            const config = this.getDefaultConfig();
            
            const seriesConfig = buildConfig(this, config.seriesAttrs);
            const titleConfig = buildConfig(this, config.titleAttrs);
            const legendConfig = buildConfig(this, config.legendAttrs);
            const pieConfig = buildConfig(this, config.pieAttrs);

            this.chart.clear();
            this.renderChart(seriesConfig, titleConfig, legendConfig, pieConfig, data);
            
        } catch (error) {
            console.error(`数据更新失败: ${error.message}`);
        }
    }
}
export default BasePieChartComponent ;